<template>
  <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'chartOCGraph',
  props: {
    nodes: {
      type: Array,
      default() {
        return []
      }
    },
    links: {
      type: Array,
      default() {
        return []
      }
    },
    category: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      charts: null,
      // graph: require('../data/map.json'),
      // graph: require('../data/test.json')
      graph: {},
      categories: [{
        name: 'paper'
      }, {
        name: 'keywords'
      }]
    }
  },
  computed: {},
  methods: {
    resizeCharts() {
      this.charts.resize()
    },
    initCharts() {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.barChart)
        this.charts.clear()
        this.charts.showLoading()
        if (this.nodes.length > 0 || this.links.length > 0) {
          this.setOption()
        }
      })
    },
    setOption() {
      console.log('charOCGraph Nodes: ', this.nodes)
      console.log('charOCGraph Links: ', this.links)
      if (this.category.length > 0) {
        this.categories = this.category
      }
      // 初始化
      // var _this = this
      const option = this.getOption()
      this.charts.hideLoading()
      this.charts.setOption(option, true)
    },
    getOption() {
      const option = {
        // title: {
        //   text: '图谱',
        //   subtext: 'Default layout',
        //   top: 'bottom',
        //   left: 'right'
        // },
        // color: ['#6699CC', '#99CCFF'],
        color: ['#99BBFF', '#00BBFF'],
        tooltip: {
          trigger: 'item',
          enterable: true,
          // extraCssText: 'width:500px;height:300px',
          formatter: function (params) { // 连接线上提示文字格式化
            // if (params.data.source) { // 注意判断，else是将节点的文字也初始化成想要的格式
            //   return params.data.source + '->' + params.data.target
            // } else {
            //   return params.name
            // }
            if (params.dataType === 'node' && params.data.category === 'keywords') {
              console.log('cur node:', params)
              // const url = './#/paper?resource=&title=&id='
              // const url = 'http://192.168.1.1:8080/get_qh_detail?tm=' + encodeURI(papers.tm) + '&wjm=' + encodeURI(papers.wjm) +
              //   '&bm=' + encodeURI(papers.bm) + '&tablename=' + encodeURI(papers.tablename + '&db=' + papers.db)
              var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;"><p>' + params.data.name + '-相关文献' + '</p>'
              params.data.papers.forEach(item => {
                const url = '/#/paper?id=' + encodeURI(item.id)
                // htmlStr += '<a href=\'' + url + encodeURI(item.id) + '\' target="_blank">' + item.title + '</a></br>'
                htmlStr += '<a href=\'' + url + '\' target="_blank">' + item.title + '</a></br>'
              })
              // for (var i = 0; i < 50; i++) {
              //   htmlStr += '<p style="color: #666;">' + 'ceshi' + i + '</p>'
              // }
              htmlStr += '</div>'
              return htmlStr
            } else {
              return ''
            }
          }

        },
        legend: [
          {
            data: this.categories.map(function (a) {
              return a.name
            })
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: 'Les Miserables',
            type: 'graph',
            layout: 'force',
            // data: this.graph.nodes,
            // links: this.graph.links,
            data: this.nodes,
            links: this.links,
            categories: this.categories,
            symbolSize: 90,
            roam: true,
            draggable: true,
            force: {
              edgeLength: 200,
              repulsion: 1000,
              gravity: 0.1
            },
            label: {
              show: true,
              // position: 'right',
              formatter: '{b}',
              // width: 100,
              overflow: 'truncate'
            },
            lineStyle: {
              color: 'source'
              // curveness: 0.3,
              // width: 20
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      }
      return option
    }
  },
  mounted() {
    this.initCharts()
  },
  beforeDestroy() {
    this.charts && this.charts.dispose()
    this.charts = null
  },
  watch: {
    nodes: {
      handler() {
        this.setOption()
      }
    },
    links: {
      handler() {
        this.setOption()
      }
    }
  },
  components: {}
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
